<!-- 搜索条件 -->
<template>
  <el-form-item :label="recordData.codeName || recordData.name" v-if="recordData.codeName || recordData.name"
    :required="recordData.required == 1">
    <el-input v-if="
        recordData.operatorName == 'input' || recordData.operatorName == 'text'
      " v-model="value" @blur="inputValue" :placeholder="`请输入` + (recordData.codeName || recordData.name)" clearable
      style="width: 240px" />
    <el-input v-else-if="recordData.operatorName == 'textarea'" v-model="value" @blur="inputValue"
      :placeholder="`请输入` + (recordData.codeName || recordData.name)" type="textarea" :rows="4" style="width: 240px" />
    <el-input v-else-if="recordData.operatorName == 'number'" v-model="value" @change="inputNumber"
      :placeholder="`请输入` + (recordData.codeName || recordData.name)" type="number" :rows="4" style="width: 240px" />
    <!-- <el-input-number v-else-if="recordData.operatorName == 'number'" v-model="value" :controls="false"
      :placeholder="`请输入` + (recordData.codeName || recordData.name)" @change="inputNumber" style="width: 240px" /> -->
    <el-date-picker v-else-if="recordData.operatorName == 'date'" v-model="value" value-format="yyyy-MM-dd"
      :placeholder="`请选择` + (recordData.codeName || recordData.name)" @change="inputNumber" type="date"
      style="width: 240px" />
    <el-date-picker v-else-if="recordData.operatorName == 'datetime'" v-model="value" value-format="yyyy-MM-dd HH:mm:ss"
      :placeholder="`请选择` + (recordData.codeName || recordData.name)" @change="inputNumber" type="datetime"
      style="width: 240px" />
    <el-date-picker v-else-if="recordData.operatorName == 'daterange'" v-model="arrValue" value-format="yyyy-MM-dd"
      :placeholder="`请选择` + (recordData.codeName || recordData.name)" @change="inputCheckbox" type="daterange"
      style="width: 240px" />
    <!-- <el-date-picker
      v-else-if="recordData.operatorName == 'dateyear'"
      v-model="value"
      type="year"
      value-format="yyyy"
      :placeholder="`请选择` + (recordData.codeName || recordData.name)"
      @change="inputNumber"
      style="width: 100%"
    /> -->

    <el-radio-group v-else-if="recordData.operatorName == 'radio'" v-model="value" @change="inputNumber">
      <el-radio v-for="(val, key) in options" :key="key" :label="val">{{ val }}</el-radio>
    </el-radio-group>
    <el-checkbox-group v-else-if="recordData.operatorName == 'checkbox'" v-model="arrValue" @change="inputCheckbox">
      <el-checkbox v-for="(val, key) in options" :key="key" :label="val"></el-checkbox>
    </el-checkbox-group>
    <el-select v-else-if="recordData.operatorName == 'select'" v-model="value"
      :placeholder="`请选择` + (recordData.codeName || recordData.name)" @change="inputNumber" style="width: 240px">
      <el-option v-for="(val, key) in options" :key="key" :label="val" :value="val">
      </el-option>
    </el-select>
    <el-input v-if="recordData.operatorName == 'disabled'" disabled v-model="value"
      :placeholder="`请输入` + (recordData.codeName || recordData.name)" style="width: 240px" />
  </el-form-item>
</template>
<script>
  import {
    getListCode
  } from "@/api/business/definition";
  export default {
    props: {
      code: {
        default: "",
        type: String,
      },
      service: {
        default: false,
        type: Boolean,
      },
      data: {
        default: () => {},
        type: Object,
      },
      oldValue: {
        default: null,
        type: [String, Array],
      },
    },
    data() {
      return {
        value: '',
        arrValue: [],
        recordData: {},
        options: null
      };
    },
    watch: {
      service: {
        // immediate: true,
        deep: true,
        handler(nVal, oVal) {
          this.getData();
        }
      },
      data: {
        // immediate: true,
        deep: true,
        handler(nVal, oVal) {
          this.recordData = nVal;
          this.getValue();
        }
      }
    },
    computed: {},
    mounted() {},
    created() {
      if (this.service) {
        this.getData();
      } else {
        this.recordData = this.data;
        this.getValue();
      }
    },
    methods: {
      // 选择答案为数组的
      inputCheckbox(arr) {
        this.$emit("input", arr.join(","));
      },
      // 选择答案为直接是最终值的
      inputNumber(value) {
        this.$emit("input", value);
      },
      // 输入答案是target对象的
      inputValue(e) {
        const value = e.target.value;
        this.$emit("input", value);
      },
      // 设置默认选中的选项
      getValue() {
        if (this.data.answer) {
          if (
            this.data.operatorName == "checkbox" ||
            this.data.operatorName == "daterange"
          ) {
            // 只有多选和时间范围的, 答案才是数组.需要用","分割成数组
            this.value = this.data.answer.split(",");
          } else {
            // 其他的答案直接就是answer原版
            this.value = this.data.answer;
          }
        } else {
          if (
            this.data.operatorName == "checkbox" ||
            this.data.operatorName == "daterange"
          ) {
            // 只有多选和时间范围的, 答案才是数组.需要用","分割成数组
            this.value = [];
          } else {
            // 其他的答案直接就是answer原版
            this.value = null;
          }
        }
        if (this.data.options) {
          this.options = JSON.parse(this.data.options)
        }
      },
      getData() {
        const queryParams = {
          pageNum: 1,
          pageSize: 1,
          param: {
            code: this.code,
          },
        };
        getListCode(queryParams).then((res) => {
          if (res.data.total) {
            this.recordData = {
              ...res.data.list[0],
            };
            if (this.oldValue) {
              if (
                this.recordData.operatorName == "checkbox" ||
                this.recordData.operatorName == "daterange"
              ) {
                // 只有多选和时间范围的, 答案才是数组.需要用","分割成数组
                this.arrValue = this.oldValue.split(",");
              } else {
                // 其他的答案直接就是answer原版
                this.value = this.oldValue;
              }
            }
          }
          if (this.recordData.options) {
            this.options = JSON.parse(this.recordData.options)
          }
        });
      },
    },
  };
</script>
